MatchesSlider.render - Code Metrics - Inspection of "Run CircleCI on same node version as others tools." - soniCaH/KCVV-Elewijt-Gatsby - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — feature/gatsby-3 ( 5d0474...a1646d )

by Kevin Van

created 2021-03-11 11:12 UTC

MatchesSlider.render B

↳ Parent: MatchesSlider

Complexity

Conditions

Size

Total Lines	59
Code Lines	46

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
cc	3
eloc	46
dl	0
loc	59
rs	8.7672
c	0
b	0
f	0

How to fix Long Method

import React, { Component } from "react"
import { graphql, StaticQuery } from "gatsby"
import Slider from "react-slick"
import "./matches-slider.scss"
import MatchWithLogo from "./match-with-logo"

class MatchesSlider extends Component {
  constructor(props) {
    super(props)

    this.state = {
      data: [],
      loading: true,
    }

    this.apiServerUrl = props.config.site.siteMetadata.serverUrl
    this.apiLogoUrl = props.config.site.siteMetadata.logoUrl
    this.apiRefreshRate = props.config.site.siteMetadata.refreshRate
    this.timeout = {}
  }

  updateData() {
    const { season, regnumber } = this.props

    fetch(
      `${this.apiServerUrl}/seasons/${season}/matches/upcoming/${regnumber}`
    )
      .then((response) => response.json())
      .then((json) => this.setState({ data: json, loading: false }))

    this.timeout = setTimeout(() => {
      this.updateData(() => {})
    }, this.apiRefreshRate)
  }

  componentDidMount() {
    this.updateData()
  }

  componentWillUnmount() {
    clearInterval(this.timeout)
  }

  render() {
    if (this.state.loading === false && this.state.data) {
      if (this.state.data.length <= 0) {
        return <></>
      }
      const settings_slickslider = {
        slidesToShow: 3,
        slidesToScroll: 1,
        dots: false,
        arrows: true,
        centerMode: true,
        focusOnSelect: true,
        infinite: true,
        lazyLoad: true,

        responsive: [
          {
            breakpoint: 1400,
            settings: {
              slidesToShow: 3,
            },
          },
          {
            breakpoint: 1200,
            settings: {
              slidesToShow: 2,
            },
          },
          {
            breakpoint: 800,
            settings: {
              slidesToShow: 1,
            },
          },
        ],
      }

      this.state.data.sort((a, b) => a.dateTime - b.dateTime)

      return (
        <div className="matchesSlider--wrapper">
          <Slider className={"matchesSlider"} {...settings_slickslider}>
            {this.state.data.map((match, i) => {
              return (
                <div
                  className="matchesSlider__item"
                  key={i}
                  data-equalizer-watch="true"
                >
                  <MatchWithLogo match={match} lazyload={false} />
                </div>
              )
            })}
          </Slider>
        </div>
      )
    } else {
      return <div>Loading...</div>
    }
  }
}

const query = graphql`
  query {
    site {
      siteMetadata {
        serverUrl
        refreshRate
      }
    }
  }
`

export default ({ season, regnumber }) => (
  <StaticQuery
    query={query}
    render={(data) => (
      <MatchesSlider config={data} season={season} regnumber={regnumber} />
    )}
  />
)


1			import React, { Component } from "react"
2			import { graphql, StaticQuery } from "gatsby"
3			import Slider from "react-slick"
4			import "./matches-slider.scss"
5			import MatchWithLogo from "./match-with-logo"
6
7			class MatchesSlider extends Component {
8			constructor(props) {
9			super(props)
10
11			this.state = {
12			data: [],
13			loading: true,
14			}
15
16			this.apiServerUrl = props.config.site.siteMetadata.serverUrl
17			this.apiLogoUrl = props.config.site.siteMetadata.logoUrl
18			this.apiRefreshRate = props.config.site.siteMetadata.refreshRate
19			this.timeout = {}
20			}
21
22			updateData() {
23			const { season, regnumber } = this.props
24
25			fetch(
26			`${this.apiServerUrl}/seasons/${season}/matches/upcoming/${regnumber}`
27			)
28			.then((response) => response.json())
29			.then((json) => this.setState({ data: json, loading: false }))
30
31			this.timeout = setTimeout(() => {
32			this.updateData(() => {})
33			}, this.apiRefreshRate)
34			}
35
36			componentDidMount() {
37			this.updateData()
38			}
39
40			componentWillUnmount() {
41			clearInterval(this.timeout)
42			}
43
44			render() {
45			if (this.state.loading === false && this.state.data) {
46			if (this.state.data.length <= 0) {
47			return <></>
48			}
49			const settings_slickslider = {
50			slidesToShow: 3,
51			slidesToScroll: 1,
52			dots: false,
53			arrows: true,
54			centerMode: true,
55			focusOnSelect: true,
56			infinite: true,
57			lazyLoad: true,
58
59			responsive: [
60			{
61			breakpoint: 1400,
62			settings: {
63			slidesToShow: 3,
64			},
65			},
66			{
67			breakpoint: 1200,
68			settings: {
69			slidesToShow: 2,
70			},
71			},
72			{
73			breakpoint: 800,
74			settings: {
75			slidesToShow: 1,
76			},
77			},
78			],
79			}
80
81			this.state.data.sort((a, b) => a.dateTime - b.dateTime)
82
83			return (
84			<div className="matchesSlider--wrapper">
85			<Slider className={"matchesSlider"} {...settings_slickslider}>
86			{this.state.data.map((match, i) => {
87			return (
88			<div
89			className="matchesSlider__item"
90			key={i}
91			data-equalizer-watch="true"
92			>
93			<MatchWithLogo match={match} lazyload={false} />
94			</div>
95			)
96			})}
97			</Slider>
98			</div>
99			)
100			} else {
101			return <div>Loading...</div>
102			}
103			}
104			}
105
106			const query = graphql`
107			query {
108			site {
109			siteMetadata {
110			serverUrl
111			refreshRate
112			}
113			}
114			}
115			`
116
117			export default ({ season, regnumber }) => (
118			<StaticQuery
119			query={query}
120			render={(data) => (
121			<MatchesSlider config={data} season={season} regnumber={regnumber} />
122			)}
123			/>
124			)
125

soniCaH / KCVV-Elewijt-Gatsby

Push — feature/gatsby-3 ( 5d0474...a1646d )

MatchesSlider.render B

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like